<template>
	<view class="sleeppage">
		
				<view class="weekline">
					<view class="week">
						<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="picker">
								<view class="picker">{{date}} <view class="iconfont icon-xiangxiabeifen"></view></view>
								
							</view>
						</picker>
					</view>
					
				</view>
				
				
		<view class="back">
			<view class="datetab">
				<view class="itemdate " :class="tab=='day'?'act':''" @click="selecttab('day')">
					日
				</view>
				<view class="itemdate" :class="tab=='week'?'act':''" @click="selecttab('week')">
					周
				</view>
				<view class="itemdate" :class="tab=='month'?'act':''" @click="selecttab('month')">
					月
				</view>
			</view>
		</view>
		
		<view class="chartbox">
			<l-echart ref="chart1"></l-echart>
		</view>
		
		<view class="title">
			关于睡眠监测
		</view>
		<view class="contentbox">
			需要佩戴设备入睡以监测睡眠数据，App通过同步设备数据并记录您的睡眠状况，进行数据分析，帮助您更好的了解您的睡眠状态，并养成良好的睡眠习惯
		</view>
		
		<view class="pagebtn">
			睡眠分析与建议
		</view>
			
	</view>
</template>

<script>
	 import lEchart from '../../pagesO/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				tab:'day',
				date:currentDate,
			}
		},
		components:{
		lEchart	
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    },
			
		},
		mounted() {
			this.initChart1()
		},
		methods: {
			initChart1() {
					let option = {
						color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
				
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#283b56'
								}
							}
						},
						legend: {
							top:0
						},
						grid: {
							bottom: 10,
							left: 0,
							right: 20,
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: [1,2,3,4,5,6,7],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						yAxis: [{
							type: 'value',
							// 格式化标签，只显示整数
							axisLabel: {
								color: '#666666',
								formatter: function(value) {
									
									return Math.round(value);
								}
							}
						}],
						
						series:[
							{
								type:'bar',
								data:[10,11,12,12,13,14,15]
							}
						]
						
					}
			     
					this.$nextTick(() => {
						this.$refs.chart1.init(this.$echarts, chart1 => {
							chart1.setOption(option);
						});
					})
					},
			getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
			           let day = date.getDate();
			
			           if (type === 'start') {
			               year = year - 10;
			           } else if (type === 'end') {
			               year = year + 10;
			           }
			           month = month > 9 ? month : '0' + month;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}-${day}`;
			       },
					
		}
	}
</script>

<style lang="less" scoped>
   .sleeppage{
	   width: 750rpx;
	   box-sizing: border-box;
	   background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	   padding-bottom: 200rpx;
	   .weekline{
	   	width: 100%;
	   	display: flex;
	   	align-items: center;
	   	justify-content: center;
	   	padding: 40rpx 0;
	   	background-color: white;
	   	.week{
	   		margin: 0 30rpx;
	   		font-weight: bold;
	   		color: #1A4F8A;
	   		font-size: 32rpx;
	   		font-family: OPPOSans-black;
	   		display: flex;
	   		align-items: center;
	   		.picker{
	   			display: flex;
	   			align-items: center;
	   			position: relative;
	   		}
	   		.iconfont{
	   			color:#5c6fac;
	   			
	   		}
	   	}
	   	
	   }
	   .back{
	   	width: 100%;
	   	height: 120rpx;
	   	background-color: white;
	   	.datetab{
	   		width: 90%;
	   		height: 110rpx;
	   		display: flex;
	   		box-sizing: border-box;
	   		padding: 10rpx;
	   		border-radius: 20rpx;
	   		margin: auto;
	   		background-color: #F4F4F4 ;
	   		color:#656565  ;
	   		line-height: 90rpx;
	   		.itemdate{
	   			width:33%;
	   			height: 100%;
	   			text-align: center;
	   			border-radius: 20rpx;
	   		}
	   		.act{
	   			background-color: white;
	   			font-weight: bold;
	   			color: #494949 ;
	   		}
	   		
	   	}
	   }
	   .chartbox{
		   width: 94%;
		   margin: 40rpx auto;
		   background: white;
		   border-radius: 20rpx;
		   box-sizing: border-box;
		   padding: 20rpx;
		   height: 700rpx;
	   }
	   .title{
		   font-weight: bold;
		   font-size: 30rpx;
		   margin: 30rpx;
	   }
	   .contentbox{
		   width: 94%;
		   margin: 40rpx auto;
		   background: white;
		   border-radius: 20rpx;
		   box-sizing: border-box;
		   padding: 20rpx;
		   font-size: 28rpx;
		   font-weight: bold;
	   }
	   .pagebtn{
		   width: 70%;
		   margin: 50rpx auto;
		   height: 70rpx;
		   line-height: 70rpx;
		   border-radius: 35rpx;
		   text-align: center;
		   color: white;
		   font-size: 30rpx;
		   background-color: #1A4F8A;
		   
	   }
   }
</style>
